<template>
  <div>
    <a-transfer
      :data-source="getDataSource()"
      :target-keys="this.value ? this.value.map(String) : []"
      :disabled="disabled"
      :show-search="showSearch"
      :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
      :show-select-all="false"
      @change="onChange"
    >
      <template
        slot="children"
        slot-scope="{
          props: { direction, filteredItems, selectedKeys, disabled: listDisabled },
          on: { itemSelectAll, itemSelect },
        }"
      >
        <a-table
          :row-selection="
            getRowSelection({ disabled: listDisabled, selectedKeys, itemSelectAll, itemSelect })
          "
          :columns="direction === 'left' ? leftColumns : rightColumns"
          :data-source="filteredItems"
          size="small"
          :style="{ pointerEvents: listDisabled ? 'none' : null }"
        >
          <a-input-number 
            v-if="showSort"
            size="small" 
            slot="key" 
            slot-scope="record"
            v-model="sorts[record]"
            @change="onNumberChange"
            :min="0"
            :max="100000"
          />
        </a-table>
      </template>
      <router-link 
        v-if="label"
        slot="footer"
        slot-scope="props"
        target='_blank' 
        :to="`/`+model+`/create`"
      >
        <a-button type="link">新增{{label}}</a-button>
      </router-link>
    </a-transfer>
  </div>
</template>
<script>
import differenceBy from 'lodash/differenceBy';
import EditableCell from '@c/EditableCell'
import _forIn from 'lodash/forIn'
import { objvalueSort,inArray } from '@/libs/utils'

const leftColumns = [
  {
    dataIndex: 'title',
    title: 'Title',
  }
];
const rightColumns = [
  {
    dataIndex: 'title',
    title: 'Title',
  },
  {
    dataIndex: 'key',
    title: 'Sort',
    scopedSlots: { customRender: 'key' },
  }
];

export default {
  name: 'LzTransfer',
  components: {
    EditableCell
  },
  props: {
    disabled:{
      type: Boolean,
      default: false,
    },
    showSearch:{
      type: Boolean,
      default: true,
    },
    showSort:{
      type: Boolean,
      default: true,
    },
    dataSource: Array,
    value: Array,
    label: null,
    model: null,
  },
  created(){
    if (this.value) {
      _forIn(this.value.map(String), (v, k) => {
        this.sorts[v] = parseInt(k);
      })
    }
  },
  data() {
    return {
      leftColumns: leftColumns,
      rightColumns: rightColumns,
      sorts: [],
    };
  },
  methods: {
    getDataSource() {
      return this.dataSource;
    },
    onNumberChange() {
      this.$emit('change', objvalueSort(this.sorts))
    },
    onChange(tar, dir, move) {
      _forIn(move, (value) => {
        if (!inArray(value,this.sorts) && dir === 'right') {
          this.sorts[value] = 0
        } else {
          delete this.sorts[value]
        }
      })
      this.$emit('change', ...arguments)
      this.$emit('input', dir === 'right' ? tar : differenceBy(this.value, move, String))
    },
    triggerDisable(disabled) {
      this.disabled = disabled;
    },
    triggerShowSearch(showSearch) {
      this.showSearch = showSearch;
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: item => ({ props: { disabled: disabled || item.disabled } }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? differenceBy(treeSelectedKeys, selectedKeys)
            : differenceBy(selectedKeys, treeSelectedKeys);
          itemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    },
  },
};
</script>
